<template>
    <div class="app-container">
        <basic-container>
            <div class="head-container">
                <Search />
                <crudOperation>
                    <el-button
                        slot="left"
                        class="filter-item"
                        type="danger"
                        icon="el-icon-delete"
                        size="mini"
                        :loading="crud.delAllLoading"
                        @click="confirmDelAll()"
                    >清空</el-button>
                </crudOperation>
            </div>
            <!--表格渲染-->
            <el-table
                ref="table"
                v-loading="crud.loading"
                :data="crud.data"
                style="width: 100%;"
                @selection-change="crud.selectionChangeHandler"
            >
                <!-- <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="请求方法">
                                <span>{{ props.row.method }}</span>
                            </el-form-item>
                            <el-form-item label="请求参数">
                                <span>{{ props.row.params }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column> -->
                <el-table-column prop="username" label="用户名" />
                <el-table-column prop="requestIp" label="IP" />
                <el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
                <el-table-column prop="description" label="描述" />
                <el-table-column prop="browser" label="浏览器" />
                <el-table-column prop="time" label="请求耗时" align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
                        <el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
                        <el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建日期" width="180px">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.createTime) }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页组件-->
            <pagination />
        </basic-container>
    </div>
</template>

<script>
import Search from "./search";
import { delAllInfo } from "@/api/monitor/log";
import CRUD, { presenter } from "@crud/crud";
import crudOperation from "@crud/CRUD.operation";
import pagination from "@crud/Pagination";

export default {
    name: "Log",
    components: { Search, crudOperation, pagination },
    cruds() {
        return CRUD({ title: "日志", url: "api/logs" });
    },
    mixins: [presenter()],
    created() {
        this.crud.optShow = {
            add: false,
            edit: false,
            del: false,
            download: true,
            reset: true
        };
    },
    methods: {
        confirmDelAll() {
            this.$confirm(`确认清空所有操作日志吗?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.crud.delAllLoading = true;
                    delAllInfo()
                        .then(res => {
                            this.crud.delAllLoading = false;
                            this.crud.dleChangePage(1);
                            this.crud.delSuccessNotify();
                            this.crud.toQuery();
                        })
                        .catch(err => {
                            this.crud.delAllLoading = false;
                            console.log(err.response.data.message);
                        });
                })
                .catch(() => {});
        }
    }
};
</script>

<style>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 70px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
}
.demo-table-expand .el-form-item__content {
    font-size: 12px;
}
</style>
